<template>
  <div class="album-editor">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/resources/resource/album-management" tag="a">专辑管理</router-link>
        </li>
        <li class="gap">&gt;</li>
      </template>
      <li>{{ !$store.state.checkLevel ? '查看' : '编辑' }}</li>
    </nav-header>
    <div class="publishFrom">
      <el-form :model="albumData" :rules="rules" ref="albumData" label-width="150px" class="demo-ruleForm">
        <el-form-item label="封面图片">
          <div class="publishFrom_ box">
            <img v-if="selectFileOrNot || albumData.picture != ''" :src="previewImgURL" class="avatar">
            <!-- @files-submitted="fileSubmit"  -->
            <uploader
              :options="uploadOptions"
              :autoStart="false"
              ref="uploader"
              :file-status-text="statusText"
              @file-added="fileAddImg"
              @file-removed="fileRemoved"
              @file-success="fileSuccess"
              @file-error="fileFail"
              class="uploader-example">
              <uploader-unsupport></uploader-unsupport>
              <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">
                <i class="el-icon-upload"></i>
                <p>选择文件（仅支持图片的文件）</p>
              </uploader-btn>
              <!-- <uploader-list  v-if="selectFileShow===false?true:false"></uploader-list> -->
              <div class="uploader-close-box" v-show="selectFileOrNot || albumData.picture != ''">
                <label class="el-upload-list__item-status-label" @click="fileRemoved">
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </transition>
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-close"></i>
                  </transition>
                </label>
              </div>
            </uploader>
          </div>
        </el-form-item>
        <el-form-item label="专辑名称" prop="name">
          <el-input v-model.trim="albumData.name"></el-input><!-- :disabled="!$store.state.platformInformation" -->
        </el-form-item>
        <el-form-item label="主讲人" prop="create_id"  v-if="$store.state.checkLevel" required>
          <el-select v-model="albumData.create_id" placeholder="请选择主讲人">
            <el-option v-for="item of speakers" :key="item.user_id" :label="item.user_name"
                       :value="item.user_id"></el-option>
          </el-select>
        </el-form-item>
        <ul v-if="!$store.state.platformInformation">
          <!--  -->
          <li class="publishFrom_seleck">
            <el-form-item label="学段" prop="study_section_id">
              <el-select v-model="albumData.study_section_id" filterable @change="relateChange($event,'study_section')"
                         placeholder="请选择">
                <el-option v-for="(item, index) in orgLevel2" :label="item.name" :value="item.id"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级" prop="grade_id">
              <el-select v-model="albumData.grade_id" filterable @change="relateChange($event,'grade')"
                         placeholder="请选择">
                <el-option v-for="(item, index) in orgLevel3" :label="item.name" :value="item.id"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
          </li>
          <!--  -->
          <li class="publishFrom_seleck">
            <el-form-item label="科目" prop="subject_id">
              <el-select v-model="albumData.subject_id" filterable placeholder="请选择">
                <el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
          </li>
        </ul>
        <el-form-item label="关键词" prop="keyword" class="keywordBox">
          <el-tag :key="index" v-for="(item, index) in albumData.keyword" size="medium" closable
                  :disable-transitions="false"
                  @close="deleteKeyword(item)">
            {{ item }}
          </el-tag>
          <template v-if="isAddTag">
            <el-input class="keyword"
                      maxlength="4"
                      style="width: 160px"
                      v-if="inputVisible"
                      v-model="inputValue"
                      placeholder="请输入关键词,不超4字"
                      ref="saveTagInput" size="small"
                      @keyup.enter.native="handleInputConfirm"
                      @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag"
                       :style="{ marginLeft: (albumData.keyword.length > 0 ? '10' : '0') + 'px' }" size="small"
                       @click="showInput">+ 关键词
            </el-button>
          </template>

        </el-form-item>

        <el-form-item v-if="$store.state.checkLevel" label="专辑介绍" prop="profile">
          <el-input type="textarea"
                    :rows="6" maxlength="200"
                    show-word-limit resize="none"
                    v-model="albumData.profile"></el-input>
        </el-form-item>
        <el-form-item v-else label="课程简介" prop="profile">
          <el-input type="textarea"
                    :rows="5" resize="none"
                    v-model="albumData.profile"></el-input>
        </el-form-item>

        <!-- <el-form-item v-if="!$store.state.checkLevel" label="课程大纲" class="flex-box">
          <template v-if="isOutLine">
            <div>
              <img :src="getImg('outline')"/>
              <span>{{ outline.name }}</span>
            </div>
            <div>{{ getByte('outline') }}</div>
            <div>
              <i class="el-icon-download" @click="download('outline')"></i>
              <i class="el-icon-circle-close-outline" @click="delRow('outline')"></i>
            </div>
          </template>
        </el-form-item> -->
        <!-- <el-form-item v-if="!$store.state.checkLevel" label="申报书" class="flex-box">
          <template v-if="isApply">
            <div>
              <img :src="getImg('apply')"/>
              <span>{{ apply.name }}</span>
            </div>
            <div>{{ getByte('apply') }}</div>
            <div>
              <i class="el-icon-download" @click="download('apply')"></i>
              <i class="el-icon-circle-close-outline" @click="delRow('apply')"></i>
            </div>
          </template>
        </el-form-item> -->
        <!-- <el-form-item v-if="!$store.state.checkLevel" label="教学评价及考核标准" class="flex-box">
          <template v-if="isTeaching">
            <div>
              <img :src="getImg('teaching')"/>
              <span>{{ teaching.name }}</span>
            </div>
            <div>{{ getByte('teaching') }}</div>
            <div>
              <i class="el-icon-download" @click="download('teaching')"></i>
              <i class="el-icon-circle-close-outline" @click="delRow('teaching')"></i>
            </div>
          </template>
        </el-form-item> -->
        <el-form-item label="课程目录" v-if="$store.state.checkLevel">
          <catalog ref="catalog" v-model="albumData.sub_data" :postData="postData"></catalog>
        </el-form-item>
        <div class="album-page" v-if="!$store.state.checkLevel">
          <!-- <div class="album-page-nb">
            <span>专辑页排序</span>
            <el-input type="number" v-model="albumData.sort" placeholder="专辑页排序"></el-input>
            <i>根据设置数字的大小，数字越大专辑排的越往后</i>
          </div> -->
          <div class="album-page-c" v-if="$store.state.checkLevel">
            <ul>
              <li class="detail-unit" v-for="(item, index) in chapterlistData" :key="index">
                <div class="detail-uni-h clear">
                  <span>&nbsp;&nbsp;&nbsp;第{{ index + 1 }}章：{{ item.album_lname }}</span>
                </div>
                <ul>
                  <li class="detail-unit-section" v-for="(item2, index2) in item.video" :key="index+'-'+index2">
                    <div class="detail-uni-h clear">
                      <el-input v-model="item2.name" placeholder="" disabled></el-input>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <el-form-item v-if="$store.state.checkLevel" label="权限公开">
          <el-radio-group v-model="albumData.authority">
            <el-radio :label="1">公开</el-radio>
            <el-radio :label="0">不公开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="$store.state.checkLevel">
          <el-button @click="cancelEdit()">取消</el-button>
          <el-button type="primary" @click="submitForm('albumData')">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="图片设置"
      :visible.sync="cropperViews"
      width="1000px"
      custom-class="croppering"
      :before-close="clearFilet"
      :close-on-click-modal="false">
      <div class="croppering">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="imgOption.img"
            :outputSize="imgOption.size"
            :outputType="imgOption.outputType"
            :info="true"
            :full="imgOption.full"
            :canMove="imgOption.canMove"
            :canMoveBox="imgOption.canMoveBox"
            :fixedBox="imgOption.fixedBox"
            :original="imgOption.original"
            :autoCrop="imgOption.autoCrop"
            :autoCropWidth="imgOption.autoCropWidth"
            :autoCropHeight="imgOption.autoCropHeight"
            :centerBox="imgOption.centerBox"
            :high="imgOption.high"
            :infoTrue="imgOption.infoTrue"
            :enlarge="imgOption.enlarge">
          </vueCropper>
        </div>
        <div slot="footer" class="dialog-footer cropper_btn">
          <el-button @click="clearFilet()">取消</el-button>
          <el-button type="primary" @click="finish('blob')">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {VueCropper} from 'vue-cropper';
import {dataURLtoFile, uploaderFileFail} from './../../../tools/tool';
import catalog from './album-catalog';

export default {
  name: '',
  components: {
    VueCropper,
    catalog
  },
  data() {
    return {
      speakers: [], // 主讲人列表
      cropperViews: false, // 是否显示图片裁剪的模态框
      imgOption: { // vue-cropper 参数配置
        img: '', // 裁剪图片的地址
        size: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图
        outputType: 'png', //输出图片格式
        canMove: true, //能否拖动图片
        fixedBox: true, //截图框固定大小
        original: false, //否显示原始宽高
        canMoveBox: true,  //能否拖动截图框
        autoCrop: true, //autoCrop 是否自动生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 290,
        autoCropHeight: 160,
        centerBox: false, //截图框是否限制在图片里
        high: true //是否根据dpr生成适合屏幕的高清图片
      },
      loading: {
        status: false,
        txt: '获取数据...',
      },
      chapterlistData: [],
      inputVisible: false,
      inputValue: '',
      imageType: ['image/jpeg', 'image/bmp', 'image/png'], // 上传图片格式
      isAddTag: true,
      albumData: {
        name: '',
        id: 0,
        picture: '',
        study_section_id: "", //学段
        grade_id: "", //年级
        subject_id: "", //科目
        keyword: [], //关键字
        profile: '',
        sort: 0,
        authority: 1, /**权限 默认1 */
        create_id: '', /**主讲人 */
        sub_data: [],
      },
      rules: {
				name: [{ required: true, message: '请输入专辑名称', trigger: 'blur' }, { min: 1, max: 30, message: '长度在30个字符内', trigger: 'blur' }],
        study_section_id: [
          {required: true, message: '请选择学段', trigger: 'change'}
        ],
        grade_id: [
          {required: true, message: '请选择年级', trigger: 'change'}
        ],
        subject_id: [
          {required: true, message: '请选择科目	', trigger: 'change'}
        ],
      },
      orgLevel2: [], //学段
      orgLevel3: [], //年级
      orgSubject: [], //科目
      isActive: false,
      statusText: {
        success: '上传成功',
        error: '上传出错',
        uploading: '正在上传...',
        paused: '暂停',
        waiting: '等待上传'
      },
      selectFileOrNot: false,  //是否选中文件
      uploadOrNot: false, 		//是否已经上传
      uploadInfo: {
        file_name: '',
        file_path: '',
        file_size: 0
      },
      attrs: {
        accept: ['image/*']
      },
      uploadOptions: {
        target: this.BASE_URL + '/api/resource/res_upload',
        testChunks: false,
        headers: {Authorization: `Bearer ` + this.$g.access_token},
      },
      selectFileShow: true,//是否显示选择文件按钮
      uploadRetryTimes: 100,//文件最大重传次数
      input: '',
      chapterlist: [],
      positionData: [],
      previewImgURL: '',
      orgLevel2Param: { //获取学段参数
        level: 2,
        pid: null,
        direction: 'balance',
      },
      orgLevel3Param: { //获取年纪参数
        level: 3,
        pid: null,
        direction: 'balance',
      },
      subjectParam: { //获取科目,版本，参数
        type: 2,
        org_id: null,
        status: 1,
      },
      showtimer: null,
      outline: {
        name: '',
        path: '',
        filesize: ''
      },
      apply: {
        name: '',
        path: '',
        filesize: ''
      },
      teaching: {
        name: '',
        path: '',
        filesize: ''
      },
      isOutLine: false,
      isApply: false,
      isTeaching: false,
      imgSrc: '',
    }
  },
  created() {
    this.getOrgLevel2();
    this.getFileData();
    this.getSpeakers();
    this.getData();
  },
  mounted() {
    this.$nextTick(() => {
      window.Uploader = this.$refs.uploader.uploader
    })
  },
  methods: {
    // 获取主讲人
    getSpeakers() {
      let success = data => {
        this.speakers = data.data;
      };
      this.$ajax.get('api/album/get_album_teacher', {
        params: {app_code: sessionStorage.getItem('CheckSchoolAppCode')},
        func: {success: success}
      });
    },
    // 提交数据
    postData() {
      let params = this.albumData;
      let success = res => {
        this.$message.success(res.msg);
        this.$router.push('/resources/resource/album-management');
      };
      let fail = res => {
        this.$message.error(res.msg);
      };
      this.$ajax.put('api/album/album', params, {
        func: {success: success, fail: fail}
      });
    },
    getImg(val) {
      let temp = null;
      let img = null;
      let arr = [];

      if (val == 'outline') {
        arr = this.outline.name.split('.');
        temp = arr[arr.length - 1];
      } else if (val == 'apply') {
        arr = this.apply.name.split('.');
        temp = arr[arr.length - 1];
      } else {
        arr = this.teaching.name.split('.');
        temp = arr[arr.length - 1];
      }

      switch (temp) {
        case 'doc':
        case 'docx':
          img = './../../../../static/format/word1.png';
          break;
        case 'pdf':
          img = './../../../../static/format/pdf.png';
          break;
        case 'xls':
        case 'xlsx':
          img = './../../../../static/format/excel1.png';
          break;
        case 'ppt':
        case 'pptx':
          img = './../../../../static/format/ptt1.png';
          break;
        default:
          img = './../../../../static/format/resourceicon1.png';
      }

      return img;
    },
    getByte(val) {
      let temp = null;
      if (val == 'outline') {
        temp = this.outline.filesize;
      } else if (val == 'apply') {
        temp = this.apply.filesize;
      } else {
        temp = this.teaching.filesize;
      }

      let size = '0 B';

      if (temp < 1024) {
        size = Math.ceil(temp) + ' B';
      } else if (temp < 1048576) {
        size = Math.ceil(temp / 1024) + ' KB';
      } else {
        size = Math.ceil(temp / 1048576) + ' MB';
      }

      return size;
    },
    download(val) {
      if (val === 'outline') {
        window.location.href = this.BASE_URL + '/index/album/albumdownload?path=' + this.outline.path + '&name=' + this.outline.name;

      } else if (val === 'apply') {
        window.location.href = this.BASE_URL + '/index/album/albumdownload?path=' + this.apply.path + '&name=' + this.apply.name;

      } else {
        window.location.href = this.BASE_URL + '/index/album/albumdownload?path=' + this.teaching.path + '&name=' + this.teaching.name;
      }
    },
    delRow(val) {
      let yes = (data => {
        if (val === 'outline') {
          this.outline.name = '';
          this.outline.path = '';
          this.outline.filesize = '';
          this.isOutLine = false;
        } else if (val === 'apply') {
          this.apply.name = '';
          this.apply.path = '';
          this.apply.filesize = '';
          this.isApply = false;
        } else {
          this.teaching.name = '';
          this.teaching.path = '';
          this.teaching.filesize = '';
          this.isTeaching = false;
        }
      })
      let cancel = (data => {
      })
      let key = null;

      if (val === 'outline') {
        key = this.outline.name;
      } else if (val === 'apply') {
        key = this.apply.name;
      } else {
        key = this.teaching.name;
      }

      this.e_confirm({yes: yes, cancel: cancel, txt: '确定将' + key + '删除吗？'});
    },
    //刪除關鍵詞
    deleteKeyword(tag) {
      this.albumData.keyword.splice(this.albumData.keyword.indexOf(tag), 1);

      clearTimeout(this.showtimer)
      if (this.albumData.keyword.length < 3) {
        this.showtimer = setTimeout(() => {
          this.isAddTag = true;
        }, 300);
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //關鍵詞
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (this.albumData.keyword.length >= 3) {
        this.$message({
          message: '不能超过3个关键词',
          type: 'warning'
        });
        return
      }
      if (inputValue) {
        this.albumData.keyword.push(inputValue);
      }

      this.albumData.keyword = this.albumData.keyword
      this.inputVisible = false;
      this.inputValue = '';

      if (this.albumData.keyword.length == 3) {
        this.isAddTag = false;
      }
    },
    getData() {
      this.loading.status = true;
      let success = (data => {
        this.loading.status = false;
        this.albumData.name = data.data.name;
        this.albumData.profile = data.data.profile;
        this.albumData.create_id = data.data.create_id;
        this.albumData.authority = data.data.authority;

        if (data.data.picture === "/static/default/video_preview.png") {
          this.albumData.picture = '';
        } else {
          this.albumData.picture = data.data.picture;
        }

        this.imgSrc = data.data.picture;

        this.outline.name = data.data.outline_name;
        this.outline.path = data.data.outline_path;
        this.outline.filesize = data.data.outline_filesize;
        this.apply.name = data.data.apply_name;
        this.apply.path = data.data.apply_path;
        this.apply.filesize = data.data.apply_filesize;
        this.teaching.name = data.data.teaching_name;
        this.teaching.path = data.data.teaching_path;
        this.teaching.filesize = data.data.teaching_filesize;
        this.isOutLine = data.data.outline_name ? true : false;
        this.isApply = data.data.apply_name ? true : false;
        this.isTeaching = data.data.teaching_name ? true : false;

        this.albumData.id = data.data.id;
        this.albumData.study_section_id = data.data.study_section_id;
        this.albumData.grade_id = data.data.grade_id;
        this.albumData.subject_id = data.data.subject_id;
        this.albumData.profile = data.data.profile;
        this.albumData.sort = data.data.sort;
        this.albumData.keyword = data.data.keyword_arr ? data.data.keyword_arr : [];
        if (this.albumData.keyword.length == 3) {
          this.isAddTag = false;
        }

        if (data.data.picture === "/static/default/video_preview.png") {
          this.albumData.picture = '';
        } else {
          this.albumData.picture = data.data.picture;
        }

        if (data.data.picture === "/static/default/video_preview.png") {
          this.previewImgURL = '';
          this.selectFileShow = true;
        } else {
          this.selectFileShow = false;
          this.previewImgURL = this.BASE_URL + data.data.picture;
        }

        this.orgLevel3Param.pid = data.data.study_section_id;
        this.getOrgLevel3();

        this.subjectParam.org_id = data.data.grade_id;
        this.getSubject();

      })
      let fail = (data => {
        this.loading.status = false
        this.$message.error(data.msg)
      })
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get('api/album/getalbum_info', {
        params: {albumid: this.$route.params.id},
        func: {success: success, fail: fail}
      })
    },
    getPosition() {
      let success = (data => {
        this.positionData = data.data;
      })
      this.$ajax.get('api/album/album_home_position', {params: {}, func: {success: success, fail: fail}})
    },
    getFileData() {
      this.loading.status = true;
      let success = (data => {
        this.loading.status = false;
        this.chapterlistData = data.data;
        console.log(data.data, 1234567)
        let res = data.data;
        let list = [];
        for (let i = 0; i < res.length; i++) {
            let push_data = {};
            push_data.relate_data = [];
            push_data.title = `第${i + 1}节`;
            push_data.id = res[i].album_lid;
            push_data.name = res[i].album_lname;
            push_data.profile = res[i].album_lprofile;

            console.log(res[i], '[i].video.')
            if(res[i].video === undefined){
                list.push(push_data);
                // console.log(list,'push_data')
            }else{
              if (res[i].video.length > 0) {
                  for (let j = 0; j < res[i].video.length; j++) {
                  let push_relate_data = {};

                  if (res[i].video[j].origin === 0) {
                    push_relate_data.type = 'video';
                  } else if (res[i].video[j].origin === 1) {
                    push_relate_data.type = 'test';
                  } else if (res[i].video[j].origin === 2) {
                    push_relate_data.type = 'resource';
                  }
                  push_relate_data.id = res[i].video[j].id;
                  push_relate_data.name = res[i].video[j].name;
                  push_relate_data.res_id = res[i].video[j].res_id;
                  push_data.relate_data.push(push_relate_data);
                }
              }
              list.push(push_data);
            }
            
          console.log(list,'push_data')

        }
        let tabelData = []
        list.forEach((item, i) => {
          console.log(item,'item');
          tabelData.push({
            title: `第${i + 1}章`,
            inx: `${i + 1}`,
            name: item.name,
            profile: '',
            id:item.id,
            relate_data: item.relate_data
          })
        })
        // console.log(this.$refs.catalog, `${data.data.length}`)

        if(res.length !== 0) {
          this.$refs.catalog.tabsData = tabelData;
          this.$refs.catalog.tabIndex = `${data.data.length}`;
        }
      })
      let fail = (data => {
        this.loading.status = false
        this.$message.error(data.msg)
      })
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get('api/album/getalbums_l', {
        params: {albumid: this.$route.params.id},
        func: {success: success, fail: fail}
      })
    },

    //获取学段
    getOrgLevel2() {
      let success = (data => {
        this.orgLevel2 = data.data;
      })
      if(this.$store.state.checkLevel) {
					this.orgLevel2Param.app_code = sessionStorage.getItem('CheckSchoolAppCode')
          this.$ajax.get('api/network/get_platform_org',{params: this.orgLevel2Param,func:{success:success}})
      }else{
          this.$ajax.get('api/org/org', {params: this.orgLevel2Param, func: {success: success}})
      }
    },
    //获取年级
    getOrgLevel3() {
      let success = (data => {
        this.orgLevel3 = data.data;

      })
      this.$ajax.get('api/org/org', {params: this.orgLevel3Param, func: {success: success}})
    },
    //获取科目
    getSubject() {

      let success = (data => {
        this.orgSubject = data.data;

      })
      this.$ajax.get('api/cate/subject', {params: this.subjectParam, func: {success: success}})
    },

    //表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.status = true;
          this.loading.txt = '保存中...'
          if (this.$store.state.checkLevel) {
            this.selectFileOrNot && this.fileUpload();
            this.$refs.catalog.validateCatalog()
          } else {
            if (this.selectFileOrNot) {
              this.fileUpload();
            } else {
              this.saveAlbum();
            }
          }
        } else {
          return false;
        }
      });
    },
    saveAlbum() {
      let params = Object.assign(this.albumData, {
        outline_name: this.outline.name,
        outline_path: this.outline.path,
        outline_filesize: this.outline.filesize,
        apply_name: this.apply.name,
        apply_path: this.apply.path,
        apply_filesize: this.apply.filesize,
        teaching_name: this.teaching.name,
        teaching_path: this.teaching.path,
        teaching_filesize: this.teaching.filesize,
      });

      let success = (data => {
        this.loading.status = false;
        this.$message.success(data.msg);
        setTimeout(() => {
          this.$router.push('/resources/resource/album-management');
        }, 1500)
      })
      let fail = (data => {
        this.loading.status = false;
        this.$message.error(data.msg)
      })
      this.$ajax.put('api/album/manage_album', params, {func: {success: success}})
    },

    //清空上传控件列表的数据
    clearFilet() {

      this.cropperViews = false;
      this.$refs.uploader.uploader.fileList = [];
      this.$refs.uploader.uploader.files = [];
      this.previewImgURL = this.imgSrc
      this.albumData.picture = this.imgSrc
    },
    fileAddImg(file, fileList) {
      let file_type = file.fileType.toLocaleLowerCase();

      if (!this.imageType.includes(file_type)) {
        this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
      } else {
        this.imgOption.img = window.URL.createObjectURL(file.file)
        this.cropperViews = true;
      }
    },
    //图片裁剪后替换原图片
    finish(type) {
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          if (data.size > 10240000) {
            this.$message.warning('只允许上传10M以内的文件');
            this.clearFilet();
          } else {
            this.$refs.uploader.uploader.fileList[0].file = data
            this.$refs.uploader.uploader.files[0].file = data
            this.$refs.uploader.uploader.fileList[0].size = data.size
            this.$refs.uploader.uploader.files[0].size = data.size;

            this.$refs.uploader.uploader.fileList[0].fileType = 'image/png';
            this.$refs.uploader.uploader.files[0].fileType = 'image/png';
            this.$refs.uploader.uploader.fileList[0].name = this.$refs.uploader.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
            this.$refs.uploader.uploader.files[0].name = this.$refs.uploader.uploader.fileList[0].name.split(/(.*)\.[^.]+/).join('') + '.png';
            this.$refs.uploader.uploader.fileList[0].relativePath = this.$refs.uploader.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
            this.$refs.uploader.uploader.files[0].relativePath = this.$refs.uploader.uploader.fileList[0].relativePath.split(/(.*)\.[^.]+/).join('') + '.png';
            this.$refs.uploader.uploader.fileList[0].uniqueIdentifier = data.size + "-" + this.$refs.uploader.uploader.fileList[0].name;
            this.$refs.uploader.uploader.fileList[0].chunks[0].endByte = data.size;

            this.uploadInfo.file_size = data.size;
            this.previewImgURL = window.URL.createObjectURL(data);
            // this.albumData.select_or_not = '1';
            this.selectFileOrNot = true;
            this.selectFileShow = false;
            this.cropperViews = false;
          }
        })
      } else if (type === 'base64') {
        this.$refs.cropper.getCropData((data) => {
          let modelView = dataURLtoFile(data, this.$refs.uploader.uploader.fileList[0].name);

          if (modelView.size > 10240000) {
            this.$message.warning('只允许上传10M以内的文件');
            this.clearFilet();
          } else {
            this.$refs.uploader.uploader.fileList[0].file = modelView
            this.$refs.uploader.uploader.files[0].file = modelView
            this.$refs.uploader.uploader.fileList[0].size = modelView.size
            this.$refs.uploader.uploader.files[0].size = modelView.size

            this.previewImgURL = data;
            this.albumData.select_or_not = '1';
            this.uploadInfo.file_size = this.$refs.uploader.uploader.fileList[0].size;
            this.selectFileOrNot = true;
            this.selectFileShow = false;
            this.cropperViews = false;
          }
        })
      }
    },
    cancelEdit() {
      this.$router.push('/resources/resource/album-management');
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      var mess = eval('(' + message + ')');
      mess = handleResponseData(mess);

      if (parseInt(mess.data.status) === 1) {
        this.uploadOrNot = true;
        // this.uploadInfo.file_name = mess.data.file_name;
        // this.uploadInfo.file_path = mess.data.file_path;
        // this.uploadInfo.post_fix = mess.data.post_fix;
        this.albumData.picture = mess.data.file_path;
        this.$store.state.checkLevel ? this.$refs.catalog.validateCatalog() : this.saveAlbum()
      }
    },
    fileFail(rootFile, file, message, chunk) {
      uploaderFileFail(this, Uploader, file, message);
    },
    //过滤文件格式
    fileSubmit(files, fileList, event) {
      for (var i = 0; i < fileList.length; i++) {
        if (fileList[i].fileType.indexOf('image/') === -1) {
          this.$message.warning('只允许上传图片格式的文件')
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else if (fileList[i].size > 10240000) {
          this.$message.warning('只允许上传10M以内的文件');
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else {
          if (this.$refs.uploader.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploader.uploader.removeFile(this.$refs.uploader.uploader.fileList[0]);
          }
          this.previewImgURL = window.URL.createObjectURL(fileList[i].file)
          this.albumData.select_or_not = '1';
          this.uploadInfo.file_size = fileList[i].size;
          this.selectFileOrNot = true;
          this.selectFileShow = false;
        }
      }
    },
    fileRemoved(file) {
      // this.previewImgURL = this.BASE_URL +  this.albumData.picture ;
      this.previewImgURL = '';
      this.albumData.picture = '';
      this.albumData.select_or_not = '';
      this.selectFileOrNot = false;
      this.selectFileShow = true;
    },
    fileUpload() {
      Uploader.upload();
    },
    relateChange(newVal, type) {
      switch (type) {
        case 'study_section':
          this.albumData.grade_id = null;
          this.albumData.subject_id = null;
          this.albumData.version_id = null;
          this.albumData.material_id = null;
          this.albumData.list_1_id = null;
          this.albumData.list_2_id = null;

          this.orgLevel3 = [];
          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.orgLevel3Param.pid = newVal;
          this.getOrgLevel3();
          break;
        case 'grade' :
          this.albumData.subject_id = null;
          this.albumData.version_id = null;
          this.albumData.material_id = null;
          this.albumData.list_1_id = null;
          this.albumData.list_2_id = null;

          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.subjectParam.org_id = newVal;
          this.getSubject();

          this.versionParam.org_id = newVal;

          this.materialParam.org_id = newVal;
          break;
        case 'subject':
          this.albumData.version_id = null;
          this.albumData.material_id = null;
          this.albumData.list_1_id = null;
          this.albumData.list_2_id = null;

          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.versionParam.sub_id = newVal;
          this.getVersion();

          this.materialParam.sub_id = newVal;
          break;
        case 'version' :
          this.albumData.material_id = null;
          this.albumData.list_1_id = null;
          this.albumData.list_2_id = null;

          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.materialParam.ver_id = newVal;
          this.getMaterial();
          break;
        case 'material':
          this.albumData.list_1_id = null;
          this.albumData.list_2_id = null;

          this.orgList1 = [];
          this.orgList2 = [];


          this.listParam1.material_id = newVal;
          this.listParam2.material_id = newVal;
          this.getList1();
          break;
        case 'list_1' :
          this.albumData.list_2_id = null;

          this.orgList2 = [];

          this.listParam2.pid = newVal;
          this.getList2();
          break;
        default:
          break;

      }
    }
  },
}
</script>

<style lang="scss">
.album-editor {
  .croppering {
    .cropper {
      height: 500px;

      > div {
        height: 100%;
      }
    }

    .dialog-footer {
      padding: 35px 0;
      text-align: center;

      button {
        padding: 10px 30px;
      }
    }

    .vue-cropper {
      position: relative;
      width: 100%;
      height: 500px;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      direction: ltr;
      touch-action: none;
      text-align: left;
      background-image: url("");
    }

    .cropper-box,
    .cropper-box-canvas,
    .cropper-drag-box,
    .cropper-crop-box,
    .cropper-face {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      user-select: none;
    }

    .cropper-box-canvas img {
      position: relative;
      text-align: left;
      user-select: none;
      transform: none;
      max-width: none;
      max-height: none;
    }

    .cropper-box {
      overflow: hidden;
    }

    .cropper-move {
      cursor: move;
    }

    .cropper-crop {
      cursor: crosshair;
    }

    .cropper-modal {
      background: rgba(0, 0, 0, 0.5);
    }

    .cropper-view-box {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      outline: 1px solid #39f;
      outline-color: rgba(51, 153, 255, 0.75);
      user-select: none;
    }

    .cropper-view-box img {
      user-select: none;
      text-align: left;
      max-width: none;
      max-height: none;
    }

    .cropper-face {
      top: 0;
      left: 0;
      background-color: #fff;
      opacity: 0.1;
    }

    .crop-info {
      position: absolute;
      left: 0px;
      min-width: 65px;
      text-align: center;
      color: white;
      line-height: 20px;
      background-color: rgba(0, 0, 0, 0.8);
      font-size: 12px;
    }

    .crop-line {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.1;
    }

    .line-w {
      top: -3px;
      left: 0;
      height: 5px;
      cursor: n-resize;
    }

    .line-a {
      top: 0;
      left: -3px;
      width: 5px;
      cursor: w-resize;
    }

    .line-s {
      bottom: -3px;
      left: 0;
      height: 5px;
      cursor: s-resize;
    }

    .line-d {
      top: 0;
      right: -3px;
      width: 5px;
      cursor: e-resize;
    }

    .crop-point {
      position: absolute;
      width: 8px;
      height: 8px;
      opacity: 0.75;
      background-color: #39f;
      border-radius: 100%;
    }

    .point1 {
      top: -4px;
      left: -4px;
      cursor: nw-resize;
    }

    .point2 {
      top: -5px;
      left: 50%;
      margin-left: -3px;
      cursor: n-resize;
    }

    .point3 {
      top: -4px;
      right: -4px;
      cursor: ne-resize;
    }

    .point4 {
      top: 50%;
      left: -4px;
      margin-top: -3px;
      cursor: w-resize;
    }

    .point5 {
      top: 50%;
      right: -4px;
      margin-top: -3px;
      cursor: e-resize;
    }

    .point6 {
      bottom: -5px;
      left: -4px;
      cursor: sw-resize;
    }

    .point7 {
      bottom: -5px;
      left: 50%;
      margin-left: -3px;
      cursor: s-resize;
    }

    .point8 {
      bottom: -5px;
      right: -4px;
      cursor: se-resize;
    }
  }

  .keywordBox {
    .el-form-item__content span:not(:first-child) {
      margin-left: 10px;
    }
  }

  .flex-box {
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      > div:first-child {
        width: 0;
        flex: 1;

        img {
          width: 23px;
        }

        span {
          padding-left: 10px;
        }
      }

      > div:nth-child(2) {
        width: 180px;
      }

      > div:last-child {
        width: 60px;
        display: flex;
        justify-content: space-around;

        i {
          font-size: 20px;
          cursor: pointer;
        }

        i:first-child:hover {
          color: #409EFF;
        }

        i:last-child:hover {
          color: red;
        }
      }

      > div:not(:first-child) {
        color: #B8B8B8;
      }
    }

    .el-form-item__content::before {
      display: none;
    }

    .el-form-item__content::after {
      display: none;
    }
  }

  .publishFrom {
    max-width: 800px;
  }

  .publishFrom_ {
    width: 240px;
    height: 135px;
    border: 1px solid #E0E0E0;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .avatar-uploader {
      height: 100%;
    }

    .el-upload--text {
      width: 100%;
      height: 100%;
    }

    .uploader {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, .1);
    }

    .uploader-btn {
      display: block;
      position: relative;
      padding: 0;
      font-size: 100%;
      border: 0;
      height: 100%;
      line-height: 134px;
      text-align: center;

      > i {
        font-size: 60px;
        color: #9cd1ff;
        margin-top: 10px;
      }

      i:before {
        content: "\E7C3";
      }

      > p {
        margin: -40px;
        line-height: 20px;
      }
    }

    .uploader-close-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .el-upload-list__item-status-label {
        display: block;
        position: absolute;
        right: -17px;
        top: -7px;
        width: 46px;
        height: 26px;
        background: #13ce66;
        text-align: center;
        transform: rotate(45deg);
        box-shadow: 0 1px 1px #ccc;

        .el-icon-check {
          font-size: 12px;
          margin-top: 12px;
          color: #fff;
          transform: rotate(-45deg);
          font-family: 'element-icons' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }

        .el-icon-check:before {
          content: "\E6DA";
        }

        .el-icon-close {
          display: none;
        }
      }
    }

    .uploader-close-box:hover {
      .el-upload-list__item-status-label {
        top: -4px;
        right: -15px;
        background: #f56c6c;
        box-shadow: none;
        cursor: pointer;

        .el-icon-check {
          display: none;
        }

        .el-icon-close {
          position: absolute;
          transform: rotate(-45deg);
          top: 10px;
          color: #fff;
          right: 14px;
          font-family: 'element-icons' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }

        .el-icon-close:before {
          content: "\E6DB";
        }
      }
    }
  }

  .publishFrom {
    margin-top: 30px;

    .el-table {
      th {
        border: 0;
        background: #EFEFEF;
      }
    }

    .el-input__inner,
    .el-textarea__inner,
    .is-disabled + span.el-checkbox__label {
      color: #000 !important;
    }

    .el-checkbox + .el-checkbox {
      margin: 0;

    }

    .el-checkbox-group > label {
      margin-right: 20px !important;
    }

  }

  .publishFrom_up {
    text-align: center;
    text-align-last: justify;

    > div {
      text-align-last: initial;
      text-align: left;
      display: inline-block;
      vertical-align: top;
    }
  }

  .publishFrom_seleck {
    text-align: center;
    text-align-last: justify;

    > .el-form-item {
      text-align: left;
      text-align-last: initial;
      display: inline-block;
      vertical-align: top;
    }

  }

  .numberWord {
    position: absolute;
    bottom: 5px;
    right: 15px;
    color: #666;
    line-height: 19px;

    > i {
      color: #000;
      font-weight: initial;
    }
  }

  .information {
    background: #EFF6FF;
    padding: 25px 45px 20px;
    margin-bottom: 40px;
  }

  .information_l {
    > span {
      text-align: center;
      display: inline-block;
      vertical-align: top;
      margin-right: 60px;

      > p {
        color: #888;
        line-height: 16px;
        margin-top: 10px;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .information_r {
    > p {
      font-size: 12px;
      color: #666666;
      text-align: right;

      > strong {
        font-size: 36px;
        color: #E1733A;
        line-height: 46px;
      }

      &:first-of-type {
        margin-bottom: 30px;
      }
    }
  }

  .buttonCSS {
    text-align: center;

    button {
      width: 80px;
      height: 30px;
      text-align: center;
      padding: 0;
      border: 0;
    }

    .is-plain {
      color: #6A7FBC;
    }
  }

  .uploaderList {
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0 !important;;
    left: 0;
    background: rgba(0, 0, 0, .5) !important;
    z-index: 9;
    opacity: 1;

    ul {
      position: relative;
      top: 300px;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      margin: auto !important;
      background: #eee;

      > li {
        position: relative;
      }
    }
  }

  .uploader-file-info {
    position: unset !important;
    z-index: initial !important;
  }

  .album-page-nb {
    > span {
      display: inline-block;
      vertical-align: top;
      width: 88px;
      text-align: right;
      padding-right: 12px;
      color: #606266;
    }

    .el-input {
      width: 100px;
    }

    > i {
      font-style: initial;
      color: #999;
      margin-left: 20px;
    }
  }

  .album-page-c {
    border: 1px solid #ddd;
    margin: 20px 0 40px;
  }

  .detail-unit {
    margin-bottom: 30px;

    > .detail-uni-h {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;

      .el-input__inner {
        font-size: 16px;
      }
    }

    > ul {
      padding: 0 20px 0 20px;

      > li {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;

        .el-input__inner {
          font-size: 14px;
        }
      }
    }

    .el-input__inner {
      border: 0;
    }

    .el-input.is-disabled .el-input__inner {
      background: none;
    }
  }
}


</style>
